---
type: integration
title: '@astrojs/svelte'
description: '@astrojs/svelteフレームワークインテグレーションを使用して、Astroプロジェクトのコンポーネントサポートを拡張する方法を学びます。'
sidebar:
  label: Svelte
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
category: renderer
i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

この[**Astroインテグレーション**][astro-integration]は、[Svelte](https://svelte.dev/) 5コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。Svelte 3および4のサポートについては、代わりに`@astrojs/svelte@5`をインストールしてください。

## インストール

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストール](#手動インストール)できます。

`@astrojs/svelte`をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add svelte
  ```
  </Fragment>
</PackageManagerTabs>

問題が発生した場合は、[GitHubで報告してください](https://github.com/withastro/astro/issues)。そして、以下の手動インストール手順を試してください。

### 手動インストール

まず、`@astrojs/svelte`パッケージをインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/svelte
  ```
  </Fragment>
</PackageManagerTabs>

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時に`Cannot find package 'svelte'`（または同様の）警告が表示される場合は、SvelteとTypeScriptをインストールする必要があります。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install svelte typescript
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add svelte typescript
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add svelte typescript
  ```
  </Fragment>
</PackageManagerTabs>

次に、`integrations`プロパティを使用して、インテグレーションを`astro.config.*`ファイルに適用します。

```js title="astro.config.mjs" ins={2} ins="svelte()"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});
```

そして、プロジェクトのルートディレクトリに`svelte.config.js`という新しいファイルを作成し、次のコードを追加します。

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
}
```

## はじめに

Astroで最初のSvelteコンポーネントを使用するには、[UIフレームワークのドキュメント][astro-ui-frameworks]にアクセスしてください。以下について探求します。

* 📦 フレームワークコンポーネントがどのように読み込まれるか
* 💧 クライアントサイドハイドレーションのオプション
* 🤝 フレームワークを混在させてネストする機会

## オプション

このインテグレーションは`@sveltejs/vite-plugin-svelte`によって提供されています。Svelteコンパイラをカスタマイズするには、インテグレーションにオプションを指定できます。詳細については、[`@sveltejs/vite-plugin-svelte`のドキュメント](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md)を参照してください。

`astro.config.mjs`の`svelte`インテグレーションに渡すか、`svelte.config.js`でオプションを設定できます。両方が存在する場合、`astro.config.mjs`のオプションが`svelte.config.js`のオプションよりも優先されます。

```js title="astro.config.mjs" "extensions: ['.svelte']"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});
```

```js title="svelte.config.js"
export default {
  extensions: ['.svelte'],
};
```

## Preprocessors

<Since v="2.0.0" pkg="@astrojs/svelte" />

SvelteファイルでSCSSまたはStylusを使用している場合は、`svelte.config.js`ファイルを作成して、Svelteによって前処理され、Svelte IDE拡張機能がSvelteファイルを正しく解析できます。

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};
```

この設定ファイルは、`astro add svelte`を実行すると自動的に追加されます。`vitePreprocess`の詳細については、[`@sveltejs/vite-plugin-svelte`のドキュメント](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md)を参照してください。

[astro-integration]: /ja/guides/integrations-guide/

[astro-ui-frameworks]: /ja/guides/framework-components/
